page{height:100%;background-color:#F7F7F7;}
::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  color: transparent;
}
.cardDetails{
  height:100vh;
  width:calc(unit(350,rpx) * 750 / 390);
  margin-left:calc(unit(20,rpx) * 750 / 390);
  margin-right:calc(unit(20,rpx) * 750 / 390);
  .top_line{
    z-index: 50;
    width: calc(unit(350, rpx) * 750 / 390);
    position: fixed;
    height: calc(unit(48+16+16, rpx) * 750 / 390);
    background-color: #F7F7F7;
    .btn_line {
      display: flex;
      flex-direction: row;
      view {
        margin-top: calc(unit(16, rpx) * 750 / 390);
        margin-right: calc(unit(8, rpx) * 750 / 390);;
        height: calc(unit(48, rpx) * 750 / 390);
        background-color: white;
        font-size: calc(unit(24, rpx) * 750 / 390);
        text-align: center;
        line-height: calc(unit(48, rpx) * 750 / 390);
        border-radius: calc(unit(8, rpx) * 750 / 390);
        border-top: calc(unit(1, rpx) * 750 / 390) solid black;
        border-left: calc(unit(1, rpx) * 750 / 390) solid black;
        border-right: calc(unit(4, rpx) * 750 / 390) solid black;
        border-bottom: calc(unit(4, rpx) * 750 / 390) solid black;
        display: inline-block;
        image{
          transform: translateY(8rpx);
          height: calc(unit(24, rpx) * 750 / 390);
          width: calc(unit(24, rpx) * 750 / 390);
          mode:scallToFill;
        }
      }
    }
    .category_display{
      margin-top:calc(unit(8,rpx) * 750 / 390); ;
      height: calc(unit(24,rpx) * 750 / 390);
      background-color: #F7F7F7;
      white-space: nowrap;
      z-index:40;
      transition: all 0.5s;
      .category_block{
        display:inline-block;
        width: calc(unit(78,rpx) * 750 / 390);
        margin-right: calc(unit(12,rpx) * 750 / 390);
        text-align: center;
        font-size: calc(unit(18,rpx) * 750 / 390);;
        position: relative;
        view{
          position: relative;
          z-index:50;
        }
        .clicked{
          position: absolute;
          bottom: calc(unit(1,rpx) * 750 / 390);;
          width:100%;
          height:calc(unit(10,rpx) * 750 / 390);
          border-radius:calc(unit(100,rpx) * 750 / 390);
          background-color: #88ADEF;
          z-index: 30;
        }
      }
    }
  }

  .time_display{
    position: relative;
    top:calc(unit(168+24,rpx) * 750 / 390);
    padding-bottom: calc(unit(48,rpx) * 750 / 390);
    //background-color: #88ADEF;
    .time_block{
      margin-bottom: calc(unit(32,rpx) * 750 / 390);
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: flex-start;
      align-content: space-between;
      .line_text{
        width:  100%;
        height:calc(unit(21,rpx) * 750 / 390);
        line-height: calc(unit(21,rpx) * 750 / 390);;
        font-size:calc(unit(18,rpx) * 750 / 390);
        color: #979797;
        overflow: hidden;
        white-space: nowrap;
        display: flex;
        flex-direction: row;
      }
      .card{
        height: calc(unit(150,rpx) * 750 / 390);
        width: calc(unit(112.5,rpx) * 750 / 390);
        margin-right: calc(unit(6,rpx) * 750 / 390);;
        margin-bottom:calc(unit(0,rpx) * 750 / 390);
        margin-top:calc(unit(8,rpx) * 750 / 390);
        border-radius: calc(unit(8, rpx) * 750 / 390);
        image{
          width: 100%;
          height: 100%;
          mode: scaleToFill;
          z-index: 10;
          position: relative;
          .clicked{
            width: calc(unit(30,rpx) * 750 / 390);
            height: calc(unit(30,rpx) * 750 / 390);
            mode: scaleToFill;
            position: absolute;
            bottom:calc(unit(4,rpx) * 750 / 390);
            right: calc(unit(3,rpx) * 750 / 390);
            z-index:20;
          }
        }
        .collected{
          width: calc(unit(26,rpx) * 750 / 390);
          height: calc(unit(26,rpx) * 750 / 390);
          position: relative;
          bottom:calc(unit(134,rpx) * 750 / 390);
          left:calc(unit(80.5,rpx) * 750 / 390);
        }
      }
      .card:nth-child(3n-2) {
        margin-right: 0;

      }
    }
  }
}
.bottom{
  position: fixed;
  bottom:0;
  width:100%;
  height:calc(unit(48,rpx) * 750 / 390);
  background-color:#FFFFFF;
  display:flex;
  flex-direction:row;
  z-index: 50;
  view{
    font-size:calc(unit(16,rpx) * 750 / 390);
    margin-top:calc(unit(16,rpx) * 750 / 390);
    margin-bottom:calc(unit(16,rpx) * 750 / 390);
    line-height:calc(unit(16,rpx) * 750 / 390) ;
    position:absolute;
  }
}
.date_picker_view{
  z-index: 100;
  font-size: calc(unit(24, rpx) * 750 / 390);
  width:100%;
  position: fixed;
  bottom: 0;
  background-color: white;;
  text-align: center;
  height: calc(unit(324, rpx) * 750 / 390);
  border-radius: calc(unit(32,rpx) * 750 / 390) calc(unit(32,rpx) * 750 / 390) 0 0;
  picker-view{
    height: calc(unit(180,rpx) * 750 / 390);
    margin-top: calc(unit(32,rpx) * 750 / 390);
    width:calc(unit(236,rpx) * 750 / 390);
    margin-left: auto;
    margin-right: auto;
  }
  .btn{
    width: 100%;
    height:calc(unit(24,rpx) * 750 / 390); ;
    margin-top: calc(unit(32,rpx) * 750 / 390);
    line-height:calc(unit(24,rpx) * 750 / 390);
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    color:#115BDE;
  }
}
.mask {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 99;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.7);
}